<template>
	<view class="todolist-wrapper">
		<view class="updateTodolist" v-show="updateTodolist">
			<view class="todolist-input-wrapper">
				<input type="text" placeholder="请输入新的待办信息" v-model="newTodo">
				<view class="todolist-newTodo-button">
					<view class='bar'></view>
					<button @click="ok" class="todolist-yes-button">确认</button>
					<button @click="updateTodolist=false" class="todolist-close-button">取消</button>
				</view>
			</view>
		</view>

		<view class="todolist-list" v-for="(item,index) in todolist" :key="index">
			<view class="todo-wrap">
				<view class="todolist-date-title">
					<view class="home-todolist-date">
						{{item.date}}
					</view>
					<view class="iconfont" @click="updateTodo(index)">&#xe738;</view>
					<view class="iconfont" @click="delTodolist(index)">&#xec45;</view>
				</view>
				<view class="todolist-content">
					{{item.note}}
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		created() {
			this.$store.commit('getTodolist')
		},
		data() {
			return {
				updateTodolist: false,
				newTodo: '',
				index: ''
			}
		},
		computed: {
			todolist() {
				return this.$store.state.todolist
			}
		},
		methods: {
			ok() {
				let payload = {
					index: this.index,
					newTodo: this.newTodo
				}
				this.$store.commit('setTodolist', payload)
				this.updateTodolist = false;
				uni.showToast({
					title: '修改成功'
				})
				this.newTodo = ''
				this.index = ''
			},
			updateTodo(index) {
				this.index = index;
				this.updateTodolist = true
			},
			delTodolist(index) {
				this.index = index
				this.$store.commit('delTodolist', this.index)
				uni.showToast({
					title: '删除成功'
				})
				this.index = ''
			}
		}

	}
</script>

<style lang="scss">
	.updateTodolist {
		position: fixed;
		z-index: 100;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(122, 119, 119, 0.5);

		>.todolist-input-wrapper {
			background: white;
			padding: 10px;
			border-radius: 5px;

			>input {
				padding: 5px;
				font-size: 14px;
				width: 450rpx;
			}

			>.todolist-newTodo-button {
				margin-top: 10px;
				display: flex;

				>.bar {
					flex-grow: 1;
				}

				>.todolist-yes-button,
				.todolist-close-button {
					padding: 5px 10px;
					border-radius: 8px;
					background: rgb(59, 85, 71);
					color: #f3f3f3;
					font-size: 14px;
					box-shadow: 1px 1px 2px 1px #b6b6b6;
				}

				>.todolist-close-button {
					background: #f3f3f3;
					color: black;
					margin-left: 10px;
				}
			}
		}
	}

	.todolist-list {
		padding: 10px;

		>.todo-wrap {
			>.todolist-date-title {
				display: flex;
				background-color: rgba(235, 231, 231, 0.5);
				padding: 10px;
				align-items: center;

				>.iconfont {
					margin-left: 20px;
				}
			}

			>.todolist-content {
				padding: 10px;
			}
		}

	}
</style>
